<template>
	<view class="lee-chat-main">
		<view class="lee-chat-list">
			<scroll-view scroll-y="true" :scroll-into-view="scrollInfoView" scroll-with-animation="true"
				show-scrollbar="false">
				<view class="lee-chat-item" v-for="(item, index) in msgList" :key="index">
					<view v-if="item.roleType === '3'" class="lee-chat-service">
						<image class="service-img" :src="imagesYqgjUrl + 'logo.png'" mode="" />
						<view v-if="item.msgType === '1'" class="lee-chat-service-text">
							<text>{{item.content}}</text>
						</view>
						<view v-if="item.msgType === '4'" class="lee-chat-service-list">
							<view class="lee-chat-service-list-footer" bindtap="connectCustomService">
								<text>联系人工客服</text>
							</view>
						</view>
					</view>

					<!-- 客服 -->
					<view v-if="item.roleType === '2'" class="lee-chat-work">
						<image class="work-img" :src="imagesYqgjUrl + 'logo.png'" mode="" />
						<view v-if="item.msgType === '1'" class="lee-chat-work-text">
							<text>{{item.content}}</text>
						</view>
						<view v-if="item.msgType === '2'" class="lee-chat-user-img">
							<image :src="item.content" mode="aspectFit" />
						</view>
					</view>

					<!-- 普通用户 -->
					<view v-if="item.roleType === '1'" class="lee-chat-user">
						<view v-if="item.msgType === '1'" class="lee-chat-user-text">
							<text>{{item.content}}</text>
						</view>
						<view v-if="item.msgType === '2'" class="lee-chat-user-img" @click="previewScreen">
							<image :src="item.content" mode="aspectFit" />
						</view>
						<image class="user-img" :src="imagesYqgjUrl + 'xxmLogo.png'" mode="" />
					</view>

					<!-- 操作tip消息 -->
					<view v-if="item.roleType==='999'" class="lee-chat-tips">
						<text>{{item.content}}</text>
					</view>
					<view v-if="item.roleType==='4'" class="lee-chat-tips">
						<text>{{item.content}}</text>
					</view>
				</view>

				<view class="lee-chat-block" :id="lastChatNode"></view>
			</scroll-view>
		</view>

		<view class="lee-chat-textarea"
			:style="{ transform: 'translateY(' + (sendInputFocus ? (-50 - inputBottom) : -50) + 'px)' }">
			<view class="lee-chat-textarea-send">
				<input type="text" v-model="msgTextData" @focus="bindfocus" @blur="bindblur" @bindinput="bindinput" />
				<view class="lee-chat-textarea-moreMenuBtn">
					<view v-if="!sendInputFocus" class="lee-iconfont-add" @click="openChatMenu">
						<text>+</text>
					</view>
					<button v-else type="default" @click="sendSocketMsg">发送</button>
				</view>
			</view>
			<view class="lee-chat-sendMenu" :style="sendMenuStatus ? 'height:319rpx' : ''">
				<view class="lee-chat-sendMenu-mask" v-if="sendMenuStatus" @click="openChatMenu"></view>
				<view class="lee-chat-menuItem" @click="openImage" data-imgmode="1">
					<u-icon name="photo" color="#aaa" size="28"></u-icon>
					<text>图片</text>
				</view>
				<view class="lee-chat-menuItem" @click="openImage" data-imgmode="2">
					<u-icon name="camera-fill" color="#aaa" size="28"></u-icon>
					<text>拍照</text>
				</view>
				<view class="lee-chat-menuItem" @click="goChatHisPage">
					<u-icon name="list" color="#aaa" size="28"></u-icon>
					<text>聊天记录</text>
				</view>
			</view>
		</view>

		<tabbar />
	</view>
</template>

<script>
	import {
		getNavBarHeight
	} from "@/utils/system.js"
	import config from '@/configs/index.js'

	export default {
		data() {
			return {
				imagesYqgjUrl: config.IMAGES_URL_YQGJ,
				navBarHeight: getNavBarHeight(),
				navContentHeight: 0,
				navTop: 0,
				inputBottom: 0, // input 距离底部距离
				scrollInfoView: "",
				lastChatNode: "",
				customerId: "", // 客服ID
				msgTextData: "", // 文本消息
				msgImgData: "", // 图片消息
				sendInputFocus: false, // 控制光标是否聚焦在输入框中,留待扩展
				sendMenuStatus: false, // 发送消息 更多操作 菜单区域
				connectFirstTip: "人工客服已分配完成", // 连接客服首条提示
				pingTask: "",
				pingUUID: "",
				pingBack: "",
				// socket连接状态
				socketData: {
					id: 1,
					status: false,
					closeReason: "断开原因",
					closeCode: 1000, // 断开码
				},
				msgList: [],
			}
		},

		onLoad() {
			this.initMsgLoad()
		},

		methods: {
			// 打开操作菜单
			openChatMenu() {
				this.sendMenuStatus = !this.sendMenuStatus
			},

			// 页面进入初始化
			initMsgLoad() {
				this.msgList.push({
					msgType: "1", // 消息类型 1、文字 2、图片 3、语音 4、卡片
					roleType: "3", // 角色类型 1、用户 2、客服 3、智能文本 4、系统
					content: "您好，有什么可以帮您解答的吗？",
					headImg: "../../../static/images/logo.png"
				})
				this.msgList.push({
					msgType: "1", // 消息类型 1、文字 2、图片 3、语音 4、卡片
					roleType: "3", // 角色类型 1、用户 2、客服 3、智能文本 4、系统
					content: "您好，这里是临港景鸿线上客服，可以留下您咨询的问题和图片。",
					headImg: "../../../static/images/logo.png"
				})
				this.msgTextData = ""
				this.msgImgData = ""
				this.sendMenuStatus = ""
			},

			// 同步本页面所有input输入数据
			bindinput(e) {
				this[e.currentTarget.dataset.name] = e.detail.value
			},

			// 光标聚集
			bindfocus(e) {
				console.log("光标聚集")

				this.inputBottom = e.detail.height
				this.sendInputFocus = true
				this.sendMenuStatus = true // 关闭发送消息菜单
			},

			// 光标散开
			bindblur(e) {
				console.log("光标散开")
				this.sendInputFocus = false
				this.sendMenuStatus = false // 关闭发送消息菜单
			},
		}
	}
</script>

<style lang="scss" scoped>
	.lee-nav-title-fixed {
		position: fixed;
		top: 0;
		background: linear-gradient(-45deg, #6DD5EA, #03ACE5);
		z-index: 99;
		width: 100vw;
		font-size: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		opacity: 1;
		color: #ffffff;
		padding-bottom: 10rpx;
	}

	.lee-chat-nav-returnBtn {
		position: absolute;
		left: 20rpx;
	}

	.lee-chat-nav-returnBtn text {
		font-size: 35rpx;
	}

	.lee-chat-main {
		// height: 100vh;
		width: 100vw;
		background-color: #e6e6e6;
		position: relative;
	}

	.lee-chat-block {
		height: 200rpx;
		width: 100vw;
		/* padding-bottom: 200rpx; */
	}

	.lee-chat-tips {
		width: 100vw;
		height: 50rpx;
		text-align: center;
		font-size: 25rpx;
		color: #9e9e9e;
	}

	.lee-chat-list {
		overflow: hidden;
	}

	.lee-chat-list scroll-view {
		height: calc(100vh - 200rpx);
		width: 100vw;
	}

	.lee-chat-item {
		min-height: 100rpx;
		padding: 30rpx 0;
	}

	.lee-chat-service {
		width: 80vw;
		height: 100%;
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		font-size: 30rpx;
		color: #29A1CF;
	}

	.service-img {
		height: 80rpx;
		width: 80rpx;
		border-radius: 100rpx;
		margin: 0 10rpx 0 30rpx;
		background-color: #ffffff;
	}

	.lee-chat-service-list {
		width: calc(80vw - 120rpx);
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		border-radius: 10rpx;
		box-shadow: 0rpx 1rpx 10rpx #eeeeee;
	}

	.lee-chat-service-list-head text:first-child {
		font-size: 35rpx;
		color: #333333;
	}

	.lee-chat-service-list-head text:last-child {
		font-size: 30rpx;
		color: #29A1CF;
	}

	.lee-chat-service-list-head {
		padding: 20rpx 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.lee-chat-service-list-ul {
		background-color: #dddddd;
		padding: 0 30rpx;
	}

	.lee-chat-service-list-li {
		border-bottom: 1rpx solid #bdbdbd;
		padding: 10rpx 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.lee-chat-service-list-li:last-child {
		border-bottom: none;
	}

	.lee-chat-service-list-footer {
		padding: 20rpx 0;
		text-align: center;
		font-size: 35rpx;
	}

	.lee-chat-service-text {
		min-height: 80rpx;
		max-width: calc(70vw - 120rpx);
		background-color: #ffffff;
		border-radius: 10rpx;
		font-size: 30rpx;
		color: #333333;
		padding: 20rpx;
		box-sizing: border-box;
	}

	/* 客服话术部分 */
	.lee-chat-work {
		width: 100vw;
		height: 100%;
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		font-size: 30rpx;
		color: #29A1CF;
	}

	.work-img {
		height: 80rpx;
		width: 80rpx;
		border-radius: 80rpx;
		margin: 0 10rpx 0 30rpx;
		background-color: #ffffff;
	}

	.lee-chat-work-text {
		min-height: 80rpx;
		max-width: calc(70vw - 120rpx);
		background-color: #ffffff;
		border-radius: 10rpx;
		font-size: 30rpx;
		color: #333333;
		padding: 20rpx;
		box-sizing: border-box;
	}


	/* 用户话术部分 */
	.lee-chat-user {
		width: 100vw;
		height: 100%;
		display: flex;
		align-items: flex-start;
		justify-content: flex-end;
		font-size: 30rpx;
		color: #29A1CF;
	}

	.user-img {
		height: 80rpx;
		width: 80rpx;
		border-radius: 80rpx;
		margin: 0 30rpx 0 10rpx;
		background-color: #ffffff;
	}

	.lee-chat-user-text {
		min-height: 80rpx;
		max-width: calc(70vw - 120rpx);
		background-color: #ffffff;
		border-radius: 10rpx;
		font-size: 30rpx;
		color: #333333;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.lee-chat-user-img {
		/*min-height: 80rpx;*/
		/*max-height: 300rpx;*/
		/*max-width: calc(70vw - 120rpx);*/
		width: 350rpx;
		height: auto;
		background-color: #ffffff;
		border-radius: 10rpx;
		padding: 20rpx;
		box-sizing: border-box;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.lee-chat-user-img img {
		height: 100%;
		width: 100%;
		border-radius: 5rpx;
	}

	.lee-chat-textarea {
		position: fixed;
		bottom: 0;
		background-color: #eeeeee;
		min-height: 150rpx;
		width: 100vw;
		display: flex;
		flex-direction: column;
		transition: all .3s ease;
	}

	.lee-chat-textarea-send {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		transition: all .3s ease;
	}

	.lee-chat-textarea-send input {
		min-height: 80rpx;
		/* box-shadow: 0rpx 3rpx 10rpx #c5c5c5; */
		width: 70vw;
		margin: 30rpx 20rpx 20rpx 20rpx;
		padding: 5rpx 5rpx 5rpx 20rpx;
		border-radius: 10rpx;
		background-color: #ffffff;
		font-size: 40rpx;
		color: rgb(75, 75, 75);
	}

	.lee-chat-textarea-send button {
		height: 100%;
		width: calc(30vw - 20rpx);
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 35rpx;
		letter-spacing: 5rpx;
		background-color: #03ACE5;
		color: #ffffff;
	}

	.lee-chat-textarea-moreMenuBtn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: calc(30vw - 40rpx - 25rpx);
		height: 90rpx;
		padding: 30rpx 20rpx 20rpx 0rpx;
	}

	.lee-iconfont-add {
		color: #333333;
		height: 50rpx;
		width: 50rpx;
		border-radius: 100%;
		border: 4rpx solid #333333;
		text-align: center;
	}

	.lee-iconfont-add text {
		font-size: 50rpx;
		line-height: 42rpx;
		font-weight: bold;
	}

	.lee-chat-sendMenu {
		height: 1rpx;
		width: 100vw;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		transition: all .3s ease;
		overflow: hidden;
	}

	.lee-chat-sendMenu-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100vw;
		height: calc(100vh - 320rpx - 120rpx);
		background-color: #33333300;
		transform: translateY(-100%);
	}

	.lee-chat-sendMenu .lee-chat-menuItem {
		height: 100rpx;
		width: 25vw;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #757575;
		font-size: 30rpx;
		padding-top: 10rpx;
	}

	.lee-chat-sendMenu .lee-chat-menuItem .iconfont {
		font-size: 50rpx;
		color: #757575;
		margin-bottom: 10rpx;
	}


	/* 弹出框表单 */
	.leePopup-consultationForm {
		position: relative;
		background-color: #ffffff;
	}

	.leePopup-title {
		height: 80rpx;
		width: 100%;
		text-align: center;
		line-height: 80rpx;
		font-size: 35rpx;
		font-weight: bold;
		color: #333333;
	}

	.lee-popup-form {
		padding: 0 30rpx 30rpx 30rpx;
		display: flex;
		flex-direction: column;
		max-height: 50vh;
		overflow-y: auto;
	}

	.lee-popup-form-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 30rpx;
		border-bottom: 1rpx solid #eeeeee;
		padding: 10rpx 0;
	}

	.lee-popup-form-item input {
		text-align: right;
		padding: 10rpx 0;
	}

	.lee-popup-form-item picker {
		text-align: right;
		padding: 10rpx 0;
	}

	.lee-popup-form-item textarea {
		text-align: right;
		padding: 10rpx 0;
		height: 150rpx;
		width: 60%;
	}

	.lee-popup-form-item .item-photo {
		padding: 10rpx 0;
		height: auto;
		width: 70%;
	}

	.lee-popup-footer {
		height: 100rpx;
		width: 100%;
		display: flex;
		flex-direction: row;
		border-top: 1rpx solid #eeeeee;
		font-weight: bold;
		font-size: 35rpx;
	}

	.lee-popup-cancel {
		flex: 1;
		border-right: 1rpx solid #eeeeee;
		color: #333333;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.lee-popup-cancel:active {
		background-color: #eeeeee;
	}

	.lee-popup-confirm {
		flex: 1;
		color: #1B5CA0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.lee-popup-confirm:active {
		background-color: #eeeeee;
	}
</style>